<template>
  <button @tap.stop="onClick" :class="[className, 'uni-button']"> {{ text }} </button>
</template>

<script>
export default {
  name: "uni-button",
  props: {
    text: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    className: {
      type: String,
      default: ''
    }
  },
  methods: {
    onClick() {
      if (this.disabled || this.loading) {
        return
      }
      this.$emit('onClick');
    }
  }
}
</script>

<style lang="scss" scoped>
.uni-button {
  width: 100%;
  height: 100%;
  background: #461E50;
  color: #ffffff;
  text-align: center;
  line-height: 90upx;
  font-weight: 500;
  font-size: 30upx;
  border-radius: 100upx;
  font-style: normal;
  margin-left: 24upx;
  outline: none;
}
</style>